<template>
  <el-card class="property-bar">
    <el-tabs type="border-card">
      <el-tab-pane label="基础属性">
        <DstForm ref="commonParams"
                 v-model="ruleForm.commonParams"
                 :data-arr="commonParamsArr" />
        <el-button type="success"
                   @click="submitCommonParams">保存</el-button>
      </el-tab-pane>
      <el-tab-pane v-if="optionsProperty"
                   label="选项属性">
        <FormItem :list="currentItem.selectProperty"></FormItem>
      </el-tab-pane>
      <el-tab-pane label="校验属性">
        <FormItem :list="currentItem.validateParams"></FormItem>
      </el-tab-pane>
      <el-tab-pane v-if="currentItem.type == 'dstUpload'"
                   label="上传属性">
        <FormItem :list="currentItem.uploadParams"></FormItem>
      </el-tab-pane>
    </el-tabs>

  </el-card>
</template>

<script>
import _ from 'lodash'
import FormItem from '@/components/formItem'
import { commonParamsArr } from '../function/data'
import DstForm from '@/portal-common/components/DstForm/index.vue'
export default {
  components: {
    FormItem,
    DstForm
  },
  props: {
    optionsProperty: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  data() {
    return {
      ruleForm: {
        commonParams: {}
      },
      currentItem: {}, // 当前正在修改的表单项描述对象
      currentItemIndex: '' // 当前正在修改的表单项在main模块的下标
    }
  },
  computed: {
    commonParamsArr: commonParamsArr,
    commonParamsKey() {
      const obj = {}
      return obj
    }
  },
  mounted() {
    // main模块点击单项表单元素事件进行-单项切换-检查是否允许切换
    this.$EventBus.$on('clickItemAuto', this.clickItemAuto)
    // 主动请求校验right表单字段，并触发right表单字段回填到main模块，并清空currentItemIndex
    this.$EventBus.$on('applySubmitCommonParams', this.submitCommonParams)
  },
  methods: {
    // main模块点击单项切换-检查允许切换
    clickItemAuto({ item, index }) {
      if (this.currentItemIndex == index) return
      // console.log(item, index, 222299999)
      if (this.currentItemIndex !== '' && !this.submitCommonParams()) {
        this.$message.error(`右侧：对${this.currentItem.label}的操作还未保存`)
        this.$EventBus.$emit('setCurrentItemIndex', { item: this.currentItem, index: this.currentItemIndex })
        return
      }
      this.currentItem = _.cloneDeep(item)
      this.setCurrentEditIndex(index)
      // console.log(this.currentItemIndex, this.currentItem, 11199999)
      this.initValueCommonParams(this.currentItem)
    },
    // 将main模块的数据回显到right模块
    initValueCommonParams(item) {
      this.ruleForm.commonParams = item // 这里不能用assgin的方式，会造成点击前后两个的表单属性交叉。所以直接赋值
      if ('class' in item) {
        if (item.class.indexOf('dst-block') != -1) {
          this.ruleForm.commonParams.className = 'dst-block' // 因为ruleform的class可能会有多个，不能直接赋值给本页面。所以用className摘取出来
        }
        if (item.class.indexOf('dst-three-block') != -1) {
          this.ruleForm.commonParams.className = 'dst-three-block'
        }
      } else {
        this.ruleForm.commonParams.className = ''
      }
      // rules: [
      //   {
      //     required: true,
      //     validator: checkTitleLenth({ max: 50 }),
      //     trigger: 'change',
      //   },
      // ],
      if ('rules' in item) {
        console.log(item.rules[0].validator.params, item.rules[0].validator['[[Scopes]]'], 998877)
        if (item.rules[0] && 'required' in item.rules[0]) {
          this.ruleForm.commonParams.required = item.rules[0].required
        }
      } else {
        this.ruleForm.commonParams.required = false
      }
    },
    // 将right模块的数据保存到main模块
    saveValueCommonParams(item) {
      const arr = ['className'] // right模块额外为功能额外产生的属性main模块不需要，所以删除
      const obj = _.cloneDeep(item)
      if (item.className.indexOf('dst-block') !== -1) {
        if (!this.currentItem.class) {
          obj.class = 'dst-block'
        } else if (this.currentItem.class.indexOf('dst-block') === -1) {
          obj.class = this.currentItem.class + ' dst-block'
        }
      }
      if (item.className.indexOf('dst-three-block') !== -1) {
        if (!this.currentItem.class) {
          obj.class = 'dst-three-block'
        } else if (this.currentItem.class.indexOf('dst-three-block') === -1) {
          obj.class = this.currentItem.class + ' dst-three-block'
        }
      }
      arr.forEach(item => delete obj[item])
      this.$EventBus.$emit('saveValueCommonParams', { item: obj, index: this.currentItemIndex })
      // this.clearCurrent()
    },
    clearCurrent() {
      this.currentItem = {}
      this.setCurrentEditIndex('')
    },
    // 设置当前正在编辑下标，当前没有时及时清空
    setCurrentEditIndex(value) {
      this.currentItemIndex = value // 每次保存成功后清除index,减少下次用户再次点击时重复校验
      this.$EventBus.$emit('setCurrentEditIndex', { index: this.currentItemIndex })
    },
    // 校验表单，如果校验将right表单字段回填到main模块，并清空currentItemIndex
    submitCommonParams() {
      let flag = true
      this.$refs.commonParams.formValidate(valid => {
        if (valid) {
          this.saveValueCommonParams(this.ruleForm.commonParams)
          this.$message.success(`${this.currentItem.label ? this.currentItem.label : ''}:右侧表单已自动保存!`)
          this.setCurrentEditIndex('')
        } else {
          flag = false
          this.$message.error('请检查表单')
        }
      })
      return flag
    }
  }
}
</script>

<style lang="scss">
.property-bar {
  .el-radio {
    margin-right: 3px;
  }
}
</style>
